<template>
  <div class="wrap">
    <h1>less 注释  less-comments</h1>
  </div>
</template>

<script>
export default {
  name: 'Comments',
  props: {

  }
}

/*
  less 注释的作用是在编写 less 的时候增加提示和说明
  注释方式 1 ： // 单行注释的方式
  注释方式 2 ： 块注释
*/
</script>


<style lang="less" scoped>
  // 定义一个边框颜色的变量 
  @border-color: red;

  /*
   wrap作为包裹的外层壳使用
   在wrap中设置边框颜色，使用我们开始定义的变量配置边框的颜色
  */
  .wrap {
    border: 1px solid @border-color;
  }
</style>
